<template>
  <div>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <!-- <div style="float: left;">
					<el-link :underline="false" style="height: 55px; width: 80px; font-size: 18px;">登录页</el-link>
				</div>
				<div style="float: left;">
					<el-link :underline="false" style="height: 55px; width: 80px; font-size: 18px;">信息登记</el-link>
				</div>
				<div style="float: left;">
					<el-link :underline="false" style="height: 55px; width: 80px; font-size: 18px;">后台页</el-link>
				</div> -->
        <div style="float: right;">
          <el-link :underline="false"
                   type="primary"
                   style="height: 55px; width: 200px; font-size: 20px;">{{ cookie.username }}</el-link>
        </div>
      </el-header>

      <!-- 搜索框 -->
      <el-header style="background-color: #E9EEF3;">
        <div style="width: 30%; float: left;">
          <el-input placeholder="请输入搜索内容"
                    v-model="search_value">
            <el-button slot="append"
                       icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <div style=" float: left; width: 300px; font-size: 18px;">
          <el-link type="primary"
                   :underline="false"
                   @click="download">刷新</el-link>
          <el-link type="success"
                   :underline="false"
                   @click="ExportData"
                   style="margin-left: 10px;">导出数据</el-link>
          <el-link type="success"
                   :underline="false"
                   @click="clearFilter"
                   style="margin-left: 10px;">清除所有过滤器</el-link>
        </div>
      </el-header>

      <!-- 数据列表 -->
      <el-main>
        <el-table ref="filterTable"
                  :data="tables"
                  background="true"
                  stripe
                  border
                  @filter-change="filterchange"
                  @selection-change="handleSelectionChange"
                  :header-cell-style="{
            'font-weight': '400',
          }"
                  max-height="710"
                  style="width: 100%"
                  v-loading.fullscreen.lock="fullscreenLoading">
          <!-- 多选 -->
          <el-table-column type="selection"
                           width="40"> </el-table-column>

          <el-table-column label="序号"
                           type="index"
                           width="65">
            <template scope="scope">
              {{ scope.$index + addIndex }}
            </template>
          </el-table-column>
          <el-table-column prop="ids"
                           label="身份证号"
                           sortable
                           width="180"
                           column-key="ids">
          </el-table-column>
          <el-table-column prop="name"
                           sortable
                           label="姓名"
                           width="80">
          </el-table-column>
          <el-table-column prop="sex"
                           label="性别"
                           width="50">
          </el-table-column>
          <el-table-column prop="department"
                           label="部门"
                           width="100">
          </el-table-column>
          <el-table-column prop="position"
                           label="岗位"
                           width="80">
          </el-table-column>
          <el-table-column prop="phone"
                           label="手机号"
                           width="120"
                           :formatter="formatter">
          </el-table-column>
          <el-table-column prop="site"
                           sortable
                           label="地址"> </el-table-column>
          <el-table-column prop="date"
                           sortable
                           label="入职时间"
                           width="180">
          </el-table-column>
          <el-table-column prop="reference"
                           label="推荐人"
                           width="80">
          </el-table-column>
          <el-table-column label="状态"
                           prop="status"
                           column-key="status"
                           :filter-method="filterTag"
                           width="100"
                           :filters="[
              { text: '在岗', value: '1' },
              { text: '离职', value: '0' },
            ]"
                           filter-placement="bottom-end">
            <!-- :filter-method="filterTag" -->
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === '0' ? 'primary' : 'success'"
                      disable-transitions>{{ scope.row.status == 1 ? "在岗" : "离职" }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="comment"
                           column-key="comment"
                           sortable
                           label="违规记录"
                           width="100"
                           :filters="[
              { text: '无违规', value: 0 },
              { text: '违规', value: 1 },
            ]"
                           :filter-method="filterViolation"
                           filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag style="cursor:pointer;"
                      :type="scope.row.comment === 0 ? 'success' : 'danger'"
                      disable-transitions
                      effect="dark"
                      @click="GetOneViolation(scope.row)">{{ scope.row.comment }}
              </el-tag>
              <el-dialog type="text"
                         title="违规信息"
                         :visible.sync="
                  scope.row.ids === show_dialog_id ? show_violation : false
                "
                         @close="closeDialog"
                         :modal="true"
                         :modal-append-to-body="false">
                <el-table :data="get_vt"
                          style="width: 100%">
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-form label-position="left"
                               inline
                               class="demo-table-expand">
                        <el-form-item label="违规日期:">
                          <span>{{ props.row.date }}</span>
                        </el-form-item>
                        <el-form-item label="违规类别:">
                          <span>{{ props.row.rule_type }}</span>
                        </el-form-item>
                        <el-form-item label="罚款方:">
                          <span>{{ props.row.origin }}</span>
                        </el-form-item>
                        <el-form-item label="罚款金额:">
                          <span>{{ props.row.money }}</span>
                        </el-form-item>
                        <el-form-item label="违规信息:">
                          <span>{{ props.row.reason }}</span>
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-table-column>

                  <el-table-column label="违规日期"
                                   prop="date">
                  </el-table-column>
                  <el-table-column label="违规类别"
                                   prop="rule_type">
                  </el-table-column>
                  <el-table-column label="罚款方"
                                   prop="origin">
                  </el-table-column>
                </el-table>
              </el-dialog>
            </template>
          </el-table-column>
          <el-table-column fixed="right"
                           label="操作"
                           width="100">
            <template slot-scope="scope">
              <!-- 修改按钮 -->
              <el-button type="text"
                         @click="handleClick(scope.row)">修改</el-button>
              <el-dialog title="个人信息修改"
                         :visible.sync="
                  scope.row.ids === show_dialog_id ? dialogFormVisible : false
                "
                         :show-close="false"
                         :modal-append-to-body="false">
                <el-form :model="alter_form">
                  <el-form-item label="姓名"
                                :label-width="formLabelWidth">
                    <el-input v-model="alter_form.name"
                              disabled></el-input>
                  </el-form-item>
                  <el-form-item label="身份证号"
                                :label-width="formLabelWidth">
                    <el-input v-model="alter_form.ids"
                              disabled></el-input>
                  </el-form-item>
                  <el-form-item label="地址"
                                :label-width="formLabelWidth">
                    <el-input v-model="alter_form.site"></el-input>
                  </el-form-item>
                  <el-form-item label="入职时间"
                                :label-width="formLabelWidth">
                    <el-input v-model="alter_form.date"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号"
                                :label-width="formLabelWidth">
                    <el-input v-model="alter_form.phone"></el-input>
                  </el-form-item>
                  <el-row type="flex"
                          :gutter="10">
                    <el-col :span="8">
                      <el-form-item label="部门"
                                    :label-width="formLabelWidth">
                        <!-- <el-input v-model="alter_form.department"></el-input> -->
                        <el-select v-model="alter_form.department">
                          <el-option v-for="item in [
                              '龙华新签',
                              '龙华续签',
                              '龙华网销宝',
                              '产地运营',
                              '宝安新签',
                              '宝安续签',
                              '宝安网销宝',
                              '业务支持',
                              '福田新签',
                              '风控管理中心',
                            ]"
                                     :key="item"
                                     :label="item"
                                     :value="item">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="职位"
                                    :label-width="formLabelWidth">
                        <!-- <el-input v-model="alter_form.position"></el-input> -->
                        <el-select v-model="alter_form.position">
                          <el-option v-for="item in [
                              '销售',
                              '客服',
                              '经理',
                              '总监',
                              '助理',
                              '运营',
                              '美工',
                            ]"
                                     :key="item"
                                     :label="item"
                                     :value="item">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="推荐人"
                                    :label-width="formLabelWidth"
                                    style="max-margin-left: 20px;">
                        <el-input v-model="alter_form.reference"
                                  style="max-width: 130px;"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-form-item label="工作状态"
                                :label-width="formLabelWidth">
                    <!-- <el-input v-model="alter_form.status"></el-input> -->
                    <el-radio v-model="alter_form.status"
                              label="1">在职</el-radio>
                    <el-radio v-model="alter_form.status"
                              label="0">离职</el-radio>
                  </el-form-item>
                </el-form>

                <div slot="footer"
                     class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary"
                             @click="edited">保存</el-button>
                </div>
              </el-dialog>

              <!-- 增加数据按钮 -->
              <el-button type="text"
                         size="small"
                         @click="add_comment(scope.row)">增加</el-button>
              <el-dialog title="违规记录添加"
                         :visible.sync="
                  scope.row.ids === show_dialog_id ? dialogFormVisible2 : false
                "
                         :show-close="false"
                         :modal-append-to-body="false">
                <el-form :model="alter_form">
                  <el-form-item label="姓名"
                                :label-width="formLabelWidth">
                    <el-input v-model="alter_form.name"
                              disabled></el-input>
                  </el-form-item>
                  <el-form-item label="身份证号"
                                :label-width="formLabelWidth">
                    <el-input v-model="alter_form.ids"
                              disabled></el-input>
                  </el-form-item>
                  <el-form-item label="违规记录"
                                :label-width="formLabelWidth">
                    <el-input placeholder="请输入内容"
                              v-model="addForm.reason"
                              class="input-with-select">
                      <el-select placeholder="请选择"
                                 v-model="addForm.rule_type"
                                 slot="prepend">
                        <el-option label="二类违规"
                                   value="2"></el-option>
                        <el-option label="三类违规"
                                   value="3"></el-option>
                        <el-option label="四类违规"
                                   value="4"></el-option>
                        <el-option label="五类违规"
                                   value="5"></el-option>
                        <el-option label="工作失误"
                                   value="mistake"></el-option>
                        <el-option label="警告"
                                   value="warning"></el-option>
                      </el-select>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="罚款方"
                                :label-width="formLabelWidth">
                    <el-radio v-model="addForm.origin"
                              label="内部">内部</el-radio>
                    <el-radio v-model="addForm.origin"
                              label="总部">总部</el-radio>
                  </el-form-item>
                  <!-- 罚款金额 -->
                  <el-form-item label="违规日期"
                                :label-width="formLabelWidth">
                    <el-col :span="5">
                      <el-input v-model="addForm.date"
                                placeholder="例：2020-04-03"></el-input>
                    </el-col>
                    <el-col :span="3"
                            style="text-align: right;">
                      罚款金额：
                    </el-col>
                    <el-col :span="5">
                      <el-input v-model="addForm.money"
                                placeholder="例：100"></el-input>
                    </el-col>
                  </el-form-item>
                </el-form>
                <div slot="footer"
                     class="dialog-footer">
                  <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                  <el-button type="primary"
                             @click="add_c_val">保存</el-button>
                </div>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block"
             style="margin-bottom: 30px; margin-top: 20px;">
          <!-- :disabled="pagi_dis" -->
          <el-pagination :disabled="pagi_dis"
                         :hide-on-single-page="pagi_show"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         :page-sizes="[10, 20, 50, 100, this.total]"
                         :page-size="pagesize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// import text from '../components/data/text.json'
let Base64 = require("js-base64").Base64;
export default {
  data () {
    return {
      cookie: "", // 显示用户名
      tableData: [], //存放json数据
      table_copy: [], // 总数备份
      // filterData: [], // 存放筛选后的数据
      total: 0, //总数目
      pagesize: 20, //每页多少条
      currentPage: 1, //当前页
      search_value: "", //搜索值
      pagi_show: false, //是否显示分页
      pagi_dis: false, //是否禁止分页
      addIndex: 1, //分页索引
      multipleSelection: [], //多选值存放
      fullscreenLoading: true, //页面加载
      show_dialog_id: "", // 用于解决对话框重复渲染问题
      get_vt: [], // 个人所有违规
      show_violation: false, // 违规信息显示

      // 修改form 框
      dialogFormVisible: false,
      dialogFormVisible2: false,
      formLabelWidth: "120px", // 输入框宽度
      alter_form: [], // 存放修改后表单
      unalter_form: [], // row对比数据存放

      // 增加内容form 框
      addForm: {
        origin: "内部",
        rule_type: "",
        reason: "",
        money: "",
        date: "",
      },
    };
  },
  computed: {
    // 模糊搜索
    tables () {
      const search_value = this.search_value;
      const currentPage = this.currentPage;
      const pagesize = this.pagesize;
      const tol = this.table_copy.length;
      let searchs = [];
      if (search_value) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。不会改变原始数组，不会对空数组进行检测。
        searchs = this.tableData.filter((data) => {
          // data 是所有遍历后的数组
          // some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
          // some() 不会改变原始数组，不会对空数组进行检测。
          return Object.keys(data).some((key) => {
            // key 是所有的key 值
            return (
              // 检查输入的字符是不是在列表内
              String(data[key])
                .toLowerCase()
                .indexOf(search_value) > -1
            );
          });
        });
        // 用于同步total
        this.getTotals(searchs.length);

        // 筛选值进行分页
        return searchs.slice(
          (currentPage - 1) * pagesize,
          currentPage * pagesize
        );
      }
      // 清空搜索后还原总数
      if (search_value == "") {
        this.getTotals(tol);
        console.log("tol", tol);
      }
      // 衔接分页按钮
      return this.tableData.slice(
        (currentPage - 1) * pagesize,
        currentPage * pagesize
      );
    },
  },
  created () {
    // 路由传参
    this.cookie = this.$cookies.get("user");
  },
  mounted () {
    // 测试cookie
    // cookie 过期跳转到登录页
    let iskey = this.$cookies.isKey("user");
    if (iskey == false) {
      this.$message({
        message: "用户登录已过期，请重新登录",
        type: "warning",
        offset: 40,
        duration: 3000,
        center: true,
      });
      this.$router.push({
        path: "/login",
      });
    }

    // 传入本地json 数据
    // this.tableData = this.get_data

    // 传递数据总条数
    // let a = this.get_data.length
    // this.total = a
    this.download();
    // 页面加载
    this.fullscreenLoading = true;
    setTimeout(() => {
      this.fullscreenLoading = false;
    }, 500);
  },
  methods: {
    // 1.表格区域
    // 清除所有过滤器
    clearFilter () {
      this.handleSizeChange(20);
      this.pagi_show = false;
      this.$refs.filterTable.clearFilter();
    },
    // 格式化指定列
    formatter (row) {
      return row.phone;
    },
    // 筛选值改变时执行方法
    filterchange (val) {
      // 筛选值初始化
      if (
        (val.status && val.status.length > 0) ||
        (val.comment && val.comment.length > 0)
      ) {
        this.handleSizeChange(this.total);
        this.pagi_show = true;
      } else {
        this.handleSizeChange(20);
        this.pagi_show = false;
      }
      console.log(this.pagi_show);
    },
    // 状态筛选
    filterTag (value, row) {
      if (row.status === value) {
        return row.status;
      }
    },
    // 违规记录筛选
    filterViolation (value, row) {
      return row.comment === value;
    },
    // 时间筛选
    // filterHandler(value, row, column) {
    //   const property = column["property"];
    //   return row[property] === value;
    // },

    // 2.分页区域
    // 页面容量改变时运行的函数
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      //同步数据
      // 重置分页状态，按新的表格容量加载第一页的数据
      this.currentPage = 1;
      // 重置序号
      this.addIndex = 1;
    },
    // 获取改变的数据总量，分页total同步
    getTotals (val) {
      this.total = val;
      if (val === this.table_copy.length) {
        // 控制是否禁用分页栏
        this.pagi_dis = false;
        // 重置分页状态，按新的表格容量加载第一页的数据
        this.currentPage = 1;
      } else {
        if (val <= 20) {
          this.pagi_dis = true;
        }
      }
    },
    // 当前页改变时运行的函数
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      // 同步数据
      this.currentPage = val;
      // 调用加载数据的方法
      this.addIndex = (this.currentPage - 1) * this.pagesize + 1;
    },
    // 多选触发方法
    handleSelectionChange (val) {
      this.multipleSelection = val;
      // console.log('多选值', val);
    },

    // 导出数据
    ExportData () {
      import("@/vendor/Export2Excel").then((excel) => {
        //表格的表头列表
        const tHeader = [
          "身份证号",
          "姓名",
          "性别",
          "岗位",
          "职位",
          "手机号",
          "地址",
          "入职日期",
          "推荐人",
          "状态",
          "违规记录",
        ]; //与表头相对应的数据里边的字段
        const filterVal = [
          "ids",
          "name",
          "sex",
          "department",
          "position",
          "phone",
          "site",
          "date",
          "reference",
          "status",
          "comment",
        ];
        const list = this.tableData;
        const data = this.formatJson(filterVal, list); //这里还是使用export_json_to_excel方法比较好，方便操作数据
        excel.export_json_to_excel(tHeader, data, "风控信息登记表");
      });
    },
    // 数据枚举
    formatJson (filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          // if (j == "targetType") {
          //   if (v[j] == "10") {
          //     return v[j] == "司机";
          //   } else if (v[j] == "11") {
          //     return (v[j] = "网点");
          //   } else {
          //     return (v[j] = "货主");
          //   }
          // }
          // console.log(v[j]);
          return v[j];
        })
      );
    },
    // 服务器获取所有数据
    download () {
      // 数据初始化
      this.tableData = [];
      // this.handleSizeChange(20);
      this.pagi_show = false;
      // 获取所有违规记录
      // this.get_Violations();
      this.axios({
        method: "get",
        url: "https://albeibei.cn/rm/v1/get/user",
        // params: this.$cookies.get("user"),
      })
        .then((res) => {
          // console.log("data", res.data.data);
          // 获取总条数
          this.total = res.data.data.length;
          // 深复制一个数组获取total
          const t_copy = res.data.data;
          this.table_copy = Array.from(t_copy);
          const AllData = Object.values(res.data.data);
          // json 数组 转成 对象
          for (let v of AllData) {
            //身份证号解密
            let B_ids = v.idcard;
            B_ids = Base64.decode(B_ids);
            this.tableData.push({
              ids: B_ids,
              name: v.NAME,
              sex: v.sex,
              department: v.department,
              position: v.POSITION,
              phone: v.tel,
              site: v.address,
              date: v.work_time,
              reference: v.reference,
              status: v.staff,
              comment: v.COUNT,
            });
          }
          console.log("tableData", this.tableData);
        })
        .catch((err) => {
          console.log("获取数据失败2", err.response);
        });
    },

    // 获取个人违规记录
    GetOneViolation (val) {
      // console.log("单条违规id", val.ids);
      // 重置选中id
      if (val.comment !== 0) {
        // console.log('单条违规id', val);
        this.show_violation = true;
        this.show_dialog_id = val.ids;
        let cookies_value = this.cookie;
        this.axios({
          method: "post",
          url: "https://albeibei.cn/rm/v1/get/user/rule",
          data: {
            cookies_value,
            id_card: val.ids,
          },
        }).then((res) => {
          let v_res = res.data.data;
          // console.log(v_res);
          // 翻转数组，将最新信息前置
          this.get_vt = v_res.reverse();
          for (let v of v_res) {
            // switch 会直接修改原数组中的值
            switch (v.rule_type) {
              case "2":
                v.rule_type = "二类违规";
                break;
              case "3":
                v.rule_type = "三类违规";
                break;
              case "4":
                v.rule_type = "四类违规";
                break;
              case "5":
                v.rule_type = "三类违规";
                break;
              case "mistake":
                v.rule_type = "工作失误";
                break;
              case "warning":
                v.rule_type = "警告";
                break;
            }
          }
          // console.log(v_res)
        });
      }
    },

    // 3.数据修改区域
    // 修改按钮
    handleClick (val) {
      this.show_dialog_id = val.ids;
      this.dialogFormVisible = true;
      this.unalter_form = val;
      this.alter_form = JSON.parse(JSON.stringify(this.unalter_form)); // 深拷贝,该值为原始值，用于判断值是否改变
      console.log(val);
    },
    // 修改内容并发提交
    edited () {
      this.dialogFormVisible = false;
      var $this = this;
      this.axios
        .all([
          this.edite_date(),
          this.edite_status(),
          this.edite_phone(),
          this.edite_site(),
          this.edite_ref(),
          this.edite_D_position(),
        ])
        .then(
          $this.axios.spread((res1, res2, res3, res4, res5, res6) => {
            this.download(); // 数据刷新同步
            console.log("入职日期", res1);
            console.log("工作状态", res2);
            console.log("手机号", res3);
            console.log("地址", res4);
            console.log("推荐人", res5);
            console.log("部门、职位", res6);
          })
        );
    },
    // 修改日期
    edite_date () {
      if (this.alter_form.date != this.unalter_form.date) {
        // console.log("v输出");
        let cookies_value = this.cookie;
        return this.axios({
          method: "post",
          url: "https://albeibei.cn/rm/v1/update/worktime",
          data: {
            cookies_value,
            id_card: this.alter_form.ids,
            work_time: this.alter_form.date,
          },
        });
      }
    },
    // 修改状态
    edite_status () {
      if (this.alter_form.status != this.unalter_form.status) {
        let cookies_value = this.cookie;
        return this.axios({
          method: "post",
          url: "https://albeibei.cn/rm/v1/update/workstatus",
          data: {
            cookies_value,
            id_card: this.alter_form.ids,
            work_status: this.alter_form.status,
          },
        });
      }
    },
    // 修改手机号
    edite_phone () {
      if (this.alter_form.phone != this.unalter_form.phone) {
        let cookies_value = this.cookie;
        return this.axios({
          method: "post",
          url: "https://albeibei.cn/rm/v1/update/tel",
          data: {
            cookies_value,
            id_card: this.alter_form.ids,
            tel: this.alter_form.phone,
          },
        });
      }
    },
    // 修改住址
    edite_site () {
      if (this.alter_form.site != this.unalter_form.site) {
        let cookies_value = this.cookie;
        return this.axios({
          method: "post",
          url: "https://albeibei.cn/rm/v1/update/address",
          data: {
            cookies_value,
            id_card: this.alter_form.ids,
            address: this.alter_form.site,
          },
        });
      }
    },
    // // 修改推荐人
    edite_ref () {
      if (this.alter_form.reference != this.unalter_form.reference) {
        let cookies_value = this.cookie;
        return this.axios({
          method: "post",
          url: "https://albeibei.cn/rm/v1/update/ref",
          data: {
            cookies_value,
            id_card: this.alter_form.ids,
            ref: this.alter_form.reference,
          },
        });
      }
    },
    // 修改部门职位
    edite_D_position () {
      if (
        this.alter_form.department != this.unalter_form.department ||
        this.alter_form.position != this.unalter_form.position
      ) {
        let cookies_value = this.cookie;
        return this.axios({
          method: "post",
          url: "https://albeibei.cn/rm/v1/update/departpos",
          data: {
            cookies_value,
            id_card: this.alter_form.ids,
            department: this.alter_form.department,
            position: this.alter_form.position,
          },
        });
      }
    },

    // 4.添加违规记录
    // 添加违规记录
    add_comment (val) {
      this.dialogFormVisible2 = true;
      this.show_dialog_id = val.ids;
      this.rule_type = ""; // 数据初始化
      this.reason = "";
      this.alter_form = val;
    },
    // 确认添加内容
    add_c_val () {
      this.dialogFormVisible2 = false;
      // 创建comment 数组,并push对象，push方法只能用于数组
      // this.alter_form.comment = []
      // this.alter_form.comment.push({'rule_type': this.rule_type, 'reason': this.reason})
      // this.unalter_form = this.alter_form.comment
      // console.log('unalter_form', this.alter_form)

      let cookies_value = this.cookie;
      let a_money = Number(this.addForm.money);
      return this.axios({
        method: "post",
        url: "https://albeibei.cn/rm/v1/insert/record",
        // data: add_form
        data: {
          cookies_value,
          id_card: this.alter_form.ids,
          rule_type: this.addForm.rule_type,
          reason: this.addForm.reason,
          money: a_money,
          date: this.addForm.date,
          origin: this.addForm.origin,
        },
      })
        .then(() => {
          this.download(); // 数据刷新
          this.addForm = { origin: "内部" }; // form 框内容重置
          this.$message({
            message: "违规记录添加成功",
            type: "success",
            offset: 40,
            duration: 5000,
            center: true,
          });
        })
        .catch(() => {
          this.$message({
            message: "违规记录添加失败",
            type: "warning",
            offset: 40,
            duration: 5000,
            center: true,
          });
        });
    },
    // 对话框关闭方法
    closeDialog () {
      // 初始化数据
      this.show_dia_id = "";
      this.show_violation = false;
    },
  },
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}

body > .el-container {
  margin-bottom: 40px;
}

/* .v-modal {
		z-index: 2 !important;
	} */

.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

/* 违规记录信息展示 */
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
